<template>
  <div>
    <!--页面头部-->
    <nav class="navbar navbar-default navbar-fixed-top header">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                  data-target="#header-navbar-collapse" aria-expanded="false">
            <span class="sr-only">实验楼</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">
            <img src="/static/img/logo_03.png">
          </a>
        </div>

        <div class="collapse navbar-collapse" id="header-navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="dropdown ">
              <a href="javascript:void(0);" class="dropdown-toggle" data-toggle="dropdown">
                课程
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu">
                <li><a class="" href="/courses/">全部课程</a></li>
                <li><a class="" href="/courses/?status=2">即将上线</a></li>
              </ul>
            </li>
            <li class="">
              <a href="/paths/">路径</a>
            </li>
            <li class="">
              <a href="/questions/">讨论区</a>
            </li>
            <li class=" bootcamp new-nav logo-1111">
              <a href="/bootcamp/">训练营</a>

            </li>
            <li class=" new-nav logo-1111">
              <a href="/vip/">会员</a>

            </li>

          </ul>


          <div v-if="username" class="navbar-right btns">
            <span style="color: white;
                          font-size: 16px;
                          margin-top: 12px;
                          display: inline-block;">欢迎您: {{username}} | <span @click="logout">登出</span></span>
          </div>

          <div v-else class="navbar-right btns">
            <a class="btn btn-default navbar-btn sign-in" @click="show('login')">登录</a>
            <a class="btn btn-default navbar-btn sign-up" @click="show('register')">注册</a>
          </div>


          <div class="navbar-form navbar-right">
            <div class="form-group btns">
              <input v-model='kw' type="text" class="form-control" placeholder="课程 名/描述">
              <a class="btn btn-default sign-up" @click="search">搜索</a>
            </div>
          </div>
        </div>
      </div>
    </nav>
    <!--登录注册弹出框-->
    <el-dialog :visible.sync="show_modal">

      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-body">
            <ul class="nav nav-tabs">
              <li :class="{active:type=='login'}">
                <span @click="type='login'">登录</span>
              </li>
              <li :class="{active:type=='register'}">
                <span @click="type='register'">注册</span>
              </li>
            </ul>
            <div class="tab-content">
              <div :class="{active:type=='login'}" class="tab-pane" v-show="type=='login'">
                <!--              登录框-->
                <div>
                  <div class="form-group">
                    <div class="input-group">
                      <div class="input-group-addon">
                        <i class="fa fa-envelope" style="margin:0;"></i>
                      </div>
                      <input v-model="email" type="email" class="form-control" placeholder="请输入邮箱">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="input-group">
                      <div class="input-group-addon">
                        <i class="fa fa-lock" style="margin:0;"></i>
                      </div>
                      <input type="password" v-model="password" class="form-control" placeholder="请输入密码">
                    </div>
                  </div>

                  <div class="form-group remember-login">
                    <!--                    <input name="remember" type="checkbox" value="y"> 下次自动登录-->
                    <a class="pull-right" href="reset_password/index.html">忘记密码？</a>
                  </div>
                  <div class="form-group">
                    <input class="btn btn-primary" @click="login" value="进入实验楼">
                  </div>
                  <div class="form-group widget-signin">
                    <span>快速登录</span>
                    <a href="/auth/qq?next="><i class="fa fa-qq"></i></a>
                    <a @click="weibo_login"><i class="fa fa-weibo"></i></a>
                    <a href="/auth/weixin?next="><i class="fa fa-weixin"></i></a>
                    <a href="/auth/github?next="><i class="fa fa-github"></i></a>
                    <a href="/auth/renren?next="><i class="fa fa-renren"></i></a>
                  </div>
                  <div class="form-group error-msg">
                    <div class="alert alert-danger" role="alert"></div>
                  </div>
                </div>
              </div>
              <div :class="{active:type=='register'}" class="tab-pane" v-show="type=='register'">
                <!--                注册框-->
                <div>
                  <div class="form-group">
                    <div class="input-group">
                      <div class="input-group-addon">
                        <i class="fa fa-envelope" style="margin:0;"></i>
                      </div>
                      <input v-model='email' type="email" class="form-control" placeholder="请输入邮箱">
                    </div>
                  </div>
                  <div class="form-group">
                    <div class="input-group">
                      <div class="input-group-addon">
                        <i class="fa fa-lock" style="margin:0;"></i>
                      </div>
                      <input v-model="password" type="password" class="form-control" placeholder="请输入密码">
                    </div>
                  </div>
                  <div class="form-inline">
                    <div class="form-group">
                      <div class="input-group">
                        <input v-model="email_code" type="text" name="captcha_v" class="form-control"
                               placeholder="请输入验证码">
                      </div>
                    </div>
                    <button @click="send_mail">发送邮件验证码</button>
                  </div>
                  <div class="form-group">
                    <input class="btn btn-primary" value="注册" @click="reg">
                  </div>
                  <div class="form-group agree-privacy">
                    注册表示您已经同意我们的<a href="privacy/index.html" target="_blank">隐私条款</a>
                  </div>
                  <div class="form-group widget-signup">
                    <span>快速注册</span>
                    <a href="/auth/qq?next="><i class="fa fa-qq"></i></a>
                    <a href="/auth/weibo?next="><i class="fa fa-weibo"></i></a>
                    <a href="/auth/weixin?next="><i class="fa fa-weixin"></i></a>
                    <a href="/auth/github?next="><i class="fa fa-github"></i></a>
                    <a href="/auth/renren?next="><i class="fa fa-renren"></i></a>
                  </div>
                  <div class="form-group error-msg">
                    <div class="alert alert-danger" role="alert"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </el-dialog>


  </div>
</template>

<script>
  export default {
    name: "Header",
    data() {
      return {
        username: localStorage.username,
        show_modal: false,  // true
        type: 'login',  // 'register'
        email: '',
        password: '',
        email_code: '',
        kw: '', // 搜索的关键词
      }
    },
    methods: {
      show(type) {
        this.show_modal = true
        this.type = type
      },
      send_mail() {
        // axios
        debugger
        this.axios.post("/user/email/", {email: this.email}).then(res => {
          if (res.data.code == 0) {
            alert(res.data.msg)
          } else {
            alert(res.data.msg)
          }

        })
      },
      reg() {
        this.axios.post("/user/register/", {
          user_email: this.email,
          password: this.password,
          email_code: this.email_code
        }).then(res => {
          if (res.data.code == 0) {
            alert(res.data.msg)
          } else {
            alert(res.data.msg)
          }
        })
      },
      login() {
        // this.axios.post('/user/login/', {
        //   username: this.email,
        //   password: this.password
        // }).then(res => {
        //
        // })
        this.axios.post("/user/login/", {
          username: this.email,
          password: this.password
        }).then(res => {
          if (res.data.token) {
            alert('登录成功')
            var data = JSON.parse(window.atob(res.data.token.split('.')[1]))
            //"{"user_id":1,"username":"admin","email":""}"
            localStorage.setItem('token', res.data.token)
            localStorage.setItem('username', this.email)
            localStorage.setItem('uid', data.user_id)
            this.username = this.email
            this.show_modal = false
          } else {
            alert('登录失败')
          }
        }).catch(err => {
          debugger
        })
      },
      logout() {
        localStorage.clear()
        this.username = ''
      },
      weibo_login() {
        this.axios.post('/oauth/', {}).then(res => {
          debugger
          location.href = res.data.url
        })
      },
      search() {
        if(this.kw){
          location.href = '/courses/search/?kw=' + this.kw
          // this.$router.push('/courses/search/?kw=' + this.kw)
        }else{
          alert('请输入关键词')
        }
      }
    }
  }
</script>

<style scoped>

</style>
